<template>
  <div>
  <div class="item" v-for="(item,key) in list" :key="key">
    <div class="item-tittle border-bottom">
      <span class="item-tittle-icon"></span>
      {{item.title}}
    </div>
    <div v-if="item.children">
      <detail-list :list="item.children" class="children">
      </detail-list>
      <div> 111</div>
    </div>
  </div>
  </div>
</template>

<script>
  export default {
    name: "DetailList",
    props:{
      list:Array
    }
  }
</script>

<style lang="stylus" scoped>
 .item{


   .item-tittle{
     z-index 1
     left .2rem
     position: relative;
     margin-bottom: -.02rem;
     height: .8rem;
     font-size: .32rem;
     line-height: .8rem;
     .item-tittle-icon{
       display: inline-block;
       position: relative;
       width: .36rem;
       height: .36rem;
       top: .08rem
       background: url(http://s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat;
       background-size: .4rem  3rem;
     }
   }
   .children{
     padding-left .3rem
   }
 }
</style>
